<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:800px;height:400px;"></div>
  </div>
</template>

<script>
import {getMyChart} from "@/api/Reports/reports.js"
import Breadcrumb from "@/components/Breadcrumb";
import * as echarts from "echarts";
//导入lodash
import _ from "lodash";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Breadcrumb },
  props: {},
  data() {
    //这里存放数据
    return {
      //需要跟请求的折线图数据合并的options
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async getReports() {
      //在页面dom元素加载完毕之后执行的钩子函数mounted
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      //准备数据和配置项
      //发送请求获取折线图数据
      const { data: res } = await getMyChart()
      if (res.meta.status !== 200) {
        return this.$message.error("获取折线图数据失败");
      }
      this.$message.success("获取折线图数据成功")

      //合并res.data和this.options
      const result = _.merge(res.data, this.options);

      // 使用获取的数据展示图表
      myChart.setOption(result);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getReports();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
div {
  color: white;
}
#main {
  margin-top: 40px;
}
</style>